{% extends "userpage.html" %}

{% block title %}Upload Product List - {{super()}}{% endblock %}

{% block extrahdrs %}
<link rel="stylesheet" media="screen" type="text/css" href="/css/datepicker.css" />
<script type="text/javascript" src="/js/datepicker.js"></script>
{% endblock %}

{% block body %}
<h3>Upload New Product List</h3>

<form action="/upload" method="post" name="stock">
	{#
	<label for="name">Name</label> &nbsp; <input id="name" type="text" name="name" size="30" value="{{name}}" />
	<br /><br/>
	#}
	<label for="inputDate">Date</label> &nbsp; <input id="inputDate" class="inputDate" type="text" name="date" size="10" value="{{date or now_date.strftime('%Y-%m-%d')}}" />
	<br /><br/>
	
	<label for="data">Cut and Paste Product List</label><br/>
	<textarea id="data" name="data" style="width:100%;height:100px;" onfocus="$(this).select();" onclick="$(this).select();">{{data}}</textarea>
	<br /><br/>
	<label for="notes">Notes for Buyers</label> <br/>
	<span style="font-size:0.8em;">Order deadlines, announcements, etc.</span><br />
	<textarea id="notes" name="notes" class="notes">{{notes}}</textarea><br/>
	<button type="submit" name="action" value="preview" class="upload-btn">Preview</button>
	# if data and not error
		&nbsp; &nbsp; <button type="submit" name="action" value="save" class="upload-btn">&nbsp; Save &nbsp;</button>
		
		<div class="notice plus1" style="width:520px;margin-top:12px;">
			<strong>Does the preview below look good?</strong>  If so, click the Save button to continue.<br />
			If there are problems, edit the data above and click the Preview button again.
		</div>
	# endif
	<div id="error" class="error" style="display:{{cond(error,'block','none')}};width:180px;text-align:center;margin-top:12px;">{{error}}</div>
</form>
<script type="text/javascript">
	
	$('#inputDate').DatePicker({
		format:'Y-m-d',
		date: "{{date or now_date.strftime('%Y-%m-%d')}}",
		//current: $('#inputDate').val(),
		starts: 1,
		position: 'right',
		onBeforeShow: function(){
			$('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
		},
		onChange: function(formated, dates){
			$('#inputDate').val(formated);
			$('#inputDate').DatePickerHide();
		}
	});
	
	
	var erred = false;
	function err(s) {
		erred = true;
		$('#error').html(s).show();
	}
	$('.upload-btn').click(function() {
		$('#error').hide();
		erred = false;
		
		if (!$.trim($('#data').val())) {
			err('Missing Product List data!');
			$('#data').focus();
		}
		{#
		if (!$.trim($('#name').val())) {
			err('Missing name!');
			$('#name').focus();
		}
		#}
		
		return !erred;
	});
</script>

# if data and not error
	<hr />
	{% import '_product_list.html' as plist %}
	{{ plist.product_list_table(product_list, preview=True) }}
	
# endif

{% endblock %}
